<template>
	<view class="coupon-box">
		<NavBar :isScroll="false" :placeholder="false" />
		<image class="yhqbgc" src="/static/img/home/yhqbgc.png" mode=""></image>
		<view class="coupon-list">
			<view class="coupon-item zdy-flex zdy-flex-align-center" v-for="item in 4" :key="item">
				<view class="tag">专属</view>
				<view class="price zdy-flex zdy-flex-center">
					<text class="icon">￥</text>
					<text>25</text>
				</view>
				<view class="zdy-flex zdy-flex-direction" style="justify-content: center">
					<view class="price-title">无门槛优惠券</view>
					<view class="price-describe">领取后14日内有效</view>
				</view>
				<u-button color="#F74645" @click="searchRoom()">
					<span class="getCoupon">立即领取</span>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.coupon-box {
	position: relative;
	.yhqbgc {
		position: absolute;
		width: 100vw;
		height: 2280rpx;
	}
	.coupon-list {
		position: relative;
		top: 720rpx;
		::v-deep .u-button--square {
			margin-left: auto;
			width: 150rpx !important;
			height: 48rpx !important;
			background: linear-gradient(-31deg, #f74645 0%, #ff6362 99%);
			border-radius: 24rpx;
		}
		.getCoupon {
			font-weight: bold;
			font-size: 24rpx;
			color: #ffffff;
		}
		.coupon-item {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			margin-bottom: 15rpx;
			padding: 0rpx 25rpx;
			height: 134rpx;
			border-radius: 12rpx;
			width: 80%;
			background-color: #ffffff;
			.tag {
				font-size: 20rpx;
				position: absolute;
				padding: 8rpx;
				border-radius: 12rpx 0 12rpx 0;
				top: 0;
				left: 0;
				background-color: #fbe8d0;
				color: #c6a377;
			}
			.price {
				padding-right: 30rpx;
				margin-right: 30rpx;
				border-right: 1rpx #ccc dashed;
				color: #ff3434;
				font-weight: bold;
				font-size: 68rpx;
				.icon {
					font-size: 40rpx;
				}
			}
			.price-title {
				color: #602a0c;
				font-size: 28rpx;
			}
			.price-describe {
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
}
</style>
